<template>
  <nav class="nav-menu">
   <div class="nav-position">
     <ul class="menu-list">

       <li
           v-for="item in menuData"
           :key="item.key"
           class="menu-item"
           :class="{ 'has-children': item.children }"
           @mouseenter="handleMouseEnter(item.key)"
           @mouseleave="handleMouseLeave"

       >

         <!-- 主菜单项 -->

         <div class="menu-title" @click="handleClick(item)">
           <span>{{ item.title }}</span>
           <span v-if="item.children" class="arrow-icon">▼</span>
         </div>


         <!-- 子菜单 -->
         <transition name="dropdown-fade">
           <ul
               v-show="activeKey === item.key"
               class="submenu"
               v-if="item.children"
           >
             <li
                 v-for="subItem in item.children"
                 :key="subItem.key"
                 class="submenu-item"
                 :class="{ 'has-grandchildren': subItem.children }"
                 @mouseenter.stop="handleSubMouseEnter(item.key, subItem.key)"
                 @mouseleave.stop="handleSubMouseLeave"
                 @click="handleClick(subItem)"
             >
               <div class="submenu-title">
                 <span>{{ subItem.title }}</span>
               </div>

             </li>

           </ul>

         </transition>

       </li>

     </ul>
     <div class="findCode">
       <div class="frame"><span ></span>181 3161 7461
       </div>
       <p class="find">检测查询</p>
     </div>
   </div>

  </nav>
</template>

<script>
export default {
  name: 'NavMenu',
  props: {
    menuData: {
      type: Array,
      required: true,
      default: () => [
        {
          key: 'home',
          title: '首页',
          path: '/home'
        },
        {
          key: 'wmdfw',
          title: '我们的服务',
          path: '/service',
          children: [
            {
              key: 'service-01',
              title: '几何量计量',
              path: '/services/jhl',
            },{
              key: 'service-02',
              title: '力学计量',
              path: '/services/lxjl',
            },{
              key: 'service-03',
              title: '化学计量',
              path: '/services/hxjl',
            },{
              key: 'service-04',
              title: '医疗器械计量',
              path: '/services/ylqx',
            },{
              key: 'service-05',
              title: '声学计量',
              path: '/services/sx',
            },{
              key: 'service-06',
              title: '无线电计量',
              path: '/services/wxd',
            },{
              key: 'service-07',
              title: '时间频率计量',
              path: '/services/sj',
            },{
              key: 'service-08',
              title: '电磁计量',
              path: '/services/dc',
            }
          ]
        },
        {
          key: 'project',
          title: '专项检测',
          children: [
            { key: 'project-01', title: '安全阀检测' ,path: '/project/aqf'},
            { key: 'project-02', title: '特种设备检测' ,path: '/project/tzsb'},
            { key: 'project-03', title: '防雷检测' ,path: '/project/fl'},
            { key: 'project-04', title: '燃气报警器检测' ,path: '/project/rqbjq'},
          ]
        },
        {
          key: 'school',
          title: '计量院所',
          children: [
            { key: 'school-01', title: '中国航天计量测试研究所',path: '/school/jl01' },
            { key: 'school-02', title: '长城计量院304所' ,path: '/school/jl02'},
            { key: 'school-03', title: '东方计量514所',path: '/school/jl03' },
            { key: 'school-04', title: '北京计量院' ,path: '/school/jl04'},
            { key: 'school-05', title: '无线电计量测试所' ,path: '/school/jl05'},
          ]
        },
        {
          key: 'elementor',
          title: '标准大全',
          path: '/elementor'
        },
        // {
        //   key: 'news',
        //   title: '新闻中心',
        //   path: '/news'
        // },
        {
          key: 'about',
          title: '联系我们',
          path: '/about'
        }
      ]
    }
  },
  data() {
    return {
      activeKey: null,      // 当前激活的一级菜单
      activeSubKey: null    // 当前激活的二级菜单
    };
  },
  methods: {
    // 鼠标进入一级菜单项
    handleMouseEnter(key) {
      this.activeKey = key;
      this.activeSubKey = null;
    },

    // 鼠标离开一级菜单区域
    handleMouseLeave() {
      this.activeKey = null;
      this.activeSubKey = null;
    },

    // 鼠标进入二级菜单项
    handleSubMouseEnter(parentKey, subKey) {
      if (this.activeKey === parentKey) {
        this.activeSubKey = subKey;
      }
    },

    // 鼠标离开二级菜单项
    handleSubMouseLeave() {
      this.activeSubKey = null;
    },

    // 点击菜单项
    handleClick(item) {
      if (item.path) {
        // 实际项目中这里应使用路由跳转
        console.log(`导航到: ${item.path}`);
        this.$router.push(item.path);
        // window.location.href = item.path;
      }
    }
  }
};
</script>

<style scoped>
.nav-menu {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index:9999
}
.nav-position{

  width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.findCode{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  justify-content: space-between;
  padding:10px 20px;
  font-size: 20px;
  cursor: pointer;
}
.findCode .frame{
  margin-right: 30px;
  font-size: 20px;
}
.findCode .frame span{
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(../../src/assets/images/frame.png) no-repeat center;
  background-size: 100% 100%;
  vertical-align: middle;
  margin-right: 10px;
}
.findCode .find{
  background:#3167FF;
  color: #fff;
  font-size: 14px;
  padding: 6px 25px;
}

.menu-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.menu-item {
  position: relative;
  padding: 0 20px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-title {
  display: flex;
  align-items: center;
  padding: 16px 0;
  font-size: 16px;
  color: #333;
  transition: color 0.2s;
}

.menu-title:hover {
  color: #0066ff;
}

.arrow-icon {
  margin-left: 5px;
  font-size: 10px;
  transition: transform 0.2s;
}

.has-children .arrow-icon {
  transform: rotate(0deg);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.submenu-item {
  position: relative;
  padding: 8px 20px;
  transition: background-color 0.2s;
  font-size: 14px;
}

.submenu-item:hover {
  background-color: #f0f7ff;
}

.submenu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grandmenu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 180px;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  background: #fff;
  border-radius: 0 4px 4px 4px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

.grandmenu-item {
  padding: 8px 20px;
  transition: background-color 0.2s;
}

.grandmenu-item:hover {
  background-color: #f0f7ff;
}

/* 过渡动画 */
.dropdown-fade-enter-active, .dropdown-fade-leave-active {
  transition: all 0.3s ease;
}

.dropdown-fade-enter, .dropdown-fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>
